<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
      }
	
    </style>
    <title>合成生成分享图片含有信息和二维码</title>
  </head>
  <body>
  	<!--地图-->

    <!-- <img src="http://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=750*300&markers=mid,,O:116.481485,39.990464&key=2030dd46e13f737684787d1e194a204f" style="width:750px;height:300px;">

    <img src="1.png" id="img02"> -->
    <!--操作-->
    <canvas id="canvas" width="750" height="600" style="border:1px solid #000;"></canvas>
    <button id="getshareimg">生成分享图片</button>
    <img src="" id="showgetshareimg">
  </body>
  <script type="text/javascript">
var getshareimg=document.getElementById("getshareimg");	
var showgetshareimg=document.getElementById("showgetshareimg");	
//canvas
var canvas=document.getElementById("canvas");	
var ctx = canvas.getContext('2d');
//set
ctx.globalCompositeOperation = "destination-over";
//map
var img = new Image();

img.crossOrigin = "*";
img.src = 'https://restapi.amap.com/v3/staticmap?location=116.481485,39.990464&zoom=10&size=750*300&markers=mid,,O:116.481485,39.990464&key=2030dd46e13f737684787d1e194a204f';

img.onload = function(){

	ctx.drawImage(img,0,0,750,300,20,20,600,200);
}
//erweima
var img2 = new Image();
img2.crossOrigin = "*";
img2.src = 'erweima.jpg';
img2.onload = function(){
	ctx.drawImage(img2,0,500);
}
//text
ctx.font = "20px 微软雅黑,Arial,宋体";
//设置字体填充颜色
ctx.fillStyle = "#000";
//从坐标点(50,50)开始绘制文字
ctx.fillText("很好啊", 50, 400);
//生成
getshareimg.onclick=function(){
	var src=canvas.toDataURL("image/png");
	console.log(src);
	showgetshareimg.src=src;
};
  </script>
<script type="text/javascript" src="zepto.js"></script>
<script type="text/javascript">
	
	// $.ajax({
	//     type: 'POST',
	//     url: 'https://api.weixin.qq.com/cgi-bin/qrcode/create',
	//     data: {
	//     	access_token:
	// 	},
	//     dataType: 'json',
	//     success: function(result){
	//     	console.log(result);
	      
	//     },
	//     error: function(xhr, type){
	//       	alert('系统错误!')
	//     }
	// });
</script>
</html>
